<template>
	<div>
		<el-container class="fixed-box">
			<h2 class="system-title">易唐科技·在线无纸化考试系统</h2>
			<el-row type="flex" class="row-bg content" justify="space-around" align="middle">
				<el-button type="primary" icon="el-icon-edit-outline" @click="startExan">进入考试</el-button>
				<el-button type="info" icon="el-icon-s-order" @click="dialogVisible = true">查看成绩</el-button>
			</el-row>
		</el-container>
		
		<!--查看成绩对话框-->
		<el-dialog title="成绩信息" :visible.sync="dialogVisible" :before-close="handleClose">
		  <el-table :data="tableData" height="280" border style="width: 100%">
			  <!--:data用于绑定数据数组，子元素必须数组prop属性，对应相应字段-->
		      <el-table-column prop="date" label="日期" width="160"></el-table-column>
		      <el-table-column prop="studentID" label="学号" width="160"></el-table-column>
		      <el-table-column prop="name" label="姓名" width="160"></el-table-column>
		      <el-table-column prop="address" label="科目" width="160"></el-table-column>
			  <el-table-column prop="score" label="成绩"></el-table-column>
		   </el-table>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">关 闭</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
export default{
	name: "entersys",
	data () {
		return {
			dialogVisible: false, // 对话框是否打开
			isStartExan: false, // 判断是否可以开始考试！！！应当按照教师是否开启“生成考卷”来判断
			// tableData是 查看成绩 的示例数据，接收以下字段********
			tableData: [
				{
			        date: '2016-05-03',
					studentID: "1712310615",
			        name: '王小虎',
			        address: 'javascript基础',
					score: "86"
			    },{
			        date: '2019-05-03',
					studentID: "1712310615",
			        name: '王小虎',
			        address: 'element-ui框架',
					score: "71"
			    },{
			        date: '2012-04-03',
					studentID: "1712310615",
			        name: '王小虎',
			        address: 'vue基础',
					score: "92"
			    }]
		}
	},
	methods: {
		// 开始考试
		startExan () {
			// if (!this.isStartExan) {
			// 	// 当前没有考试，拦截
			// 	this.$message('还不是考试时间，注意留意通知！');
			// 	return;
			// };
			// 进入考试界面...
			var endtime=new Date().getTime()+7202000
		    this.axios.get('/api/getTitle',{params:{time:endtime} })
			this.$router.push('/examination')
		},
		
		// 关闭对话框
		handleClose(done) {
			this.$confirm('确认关闭？').then(function () {
				done(); // 关闭对话框
			}).catch(function (e) {
				console.log(e) // 确认关闭时点了“取消”，走catch回调
			});
		}
	}
}
</script>

<style scoped="scoped">
/*占满整屏的根节点*/
.fixed-box{
	position: fixed;
	display: flex;
	width: 100%;
	height: 100%;
	background-color: #f6f6f6; /*floralwhite*/
}
/*主体容器，上下水平垂直居中*/
.content{
	width: 460px;
	height: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
/*两个按钮*/
.content button{
	width: 200px;
	height: 50px;
}
/*标题*/
.system-title{
	padding: 20px;
}
</style>
